<template>
	<div class="asset-detail">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/affairs/asset/asset-list" tag="a">资产管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
            <li>资产详情</li>
		</nav-header>

        <div class="asset-detail-content" v-loading="loading.status" :element-loading-text="loading.txt">
            <div class="content-top-box">
                <div class="top-box-title">
                    <span>基本信息</span>
                    <span @click="exportQrCode">下载资产二维码</span>
                </div>
                <div class="top-box-content">
                    <div>
                        <img :src="detailInfo.thumb ? (BASE_URL + detailInfo.thumb) : defaultImg">
                        <i class="el-icon-circle-plus-outline asset-img-btn" @click="checkImg"></i>
                    </div>
                    <div>
                        <div class="top-box-right">
                            <div>
                                <div class="list-item">
                                    <div><span class="name-title">资产编号：</span><span>{{detailInfo.identifier}}</span></div>
                                    <div><span class="name-title">存放点：</span><span>{{detailInfo.place}}</span></div>
                                </div>
                                <div class="list-item">
                                    <div><span class="name-title">资产名称：</span><span>{{detailInfo.name}}</span></div>
                                    <div><span class="name-title">归属：</span><span>{{detailInfo.owner}}</span></div>
                                </div>
                                <div class="list-item">
                                    <div><span class="name-title">购买时间：</span><span>{{detailInfo.buy_time}}</span></div>
                                    <div><span class="name-title">保管人：</span><span>{{detailInfo.manager}}</span></div>
                                </div>
                                <div class="list-item">
                                    <div><span class="name-title">分类：</span><span>{{detailInfo.type_name}}</span></div>
                                    <div><span class="name-title">保管人联系方式：</span><span>{{detailInfo.mobile}}</span></div>
                                </div>
                                <div class="list-item">
                                    <div><span class="name-title">信息（品牌/型号）：</span><span>{{detailInfo.brand}}</span></div>
                                    <div><span class="name-title">单位：</span><span>{{detailInfo.unit}}</span></div>
                                </div>
                                <div class="list-item">
                                    <div><span class="name-title">数量：</span><span>{{detailInfo.number}}</span></div>
                                    <div><span class="name-title">单件价格（元）：</span><span>{{detailInfo.price}}</span></div>
                                </div>

                                <div class="list-item">
                                    <span class="name-title">总购入价格（元）：</span><span>{{detailInfo.total_price}}</span>
                                </div>
                                <div class="list-item">
                                    <span class="name-title">备注：</span><span style="flex: 1">{{detailInfo.comment}}</span>
                                </div>
                                <div class="list-item">
                                    <span class="name-title">资产状态：</span>
                                    <div class="content-state">
                                        <span>使用中（{{getAssetState(2)}}）</span>|
                                        <span>未使用（{{getAssetState(1)}}）</span>|
                                        <span>损坏（{{getAssetState(3)}}）</span>|
                                        <span>丢失（{{getAssetState(4)}}）</span>|
                                        <span class="last-span">报废（{{getAssetState(5)}}）</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="top-box-bottom">
                            <div>
                                <span class="name-title">最后编辑人：</span><span>{{detailInfo.update_name}}</span>
                            </div>
                            <div>
                                <span class="name-title">最后编辑时间：</span><span>{{detailInfo.update_time}}</span>
                            </div>
                        </div>
                        <span class="top-box-edit" @click="goTo">编辑</span>
                    </div>
                </div>
            </div>

            <div class="content-bottom-box">
                <div>
                    <div class="table-box-title">
                        <span><img src="./../../../../static/image/affairs/asset/receive.png" />领用记录</span>
                        <div>
                            <el-button @click="editReceive('add')">添加</el-button>
                            <el-button @click="getAllReceive">导出</el-button>
                        </div>
                    </div>
                    <div class="zh-table-contents" v-loading="receiveLoading.status" :element-loading-text="receiveLoading.txt">
                        <el-table
                            :data="receiveData"
                            border
                            fixed
                            max-height="600"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                :index="receiveTypeIndex"
                                label="序号"
                                align="center"
                                show-overflow-tooltip
                                width="50">
                            </el-table-column>
                            <el-table-column
                                prop="day_time"
                                label="领用时间"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="num"
                                label="领用数"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="user_name"
                                label="领用人"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="department"
                                label="领用部门"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="备注"
                                align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="check-row" v-if="scope.row.comment" @click="checkRemark(scope.row)">查看</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="130">
                                <template slot-scope="scope">
                                    <el-button @click="editReceive('edit', scope.row)" type="text">编辑</el-button>
                                    <el-button @click="deleteRow(scope.row.id, 'receive')" type="text" class="delete-button">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="table-pagination" v-show="receiveParam.totalNumber > 10">
                            <el-pagination
                                @size-change="receiveSizeChange"
                                @current-change="receiveCurrentChange"
                                :current-page="receiveParam.pageIndex"
                                :page-sizes="[10, 20, 30, 40, 50, 100]"
                                :page-size="receiveParam.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="receiveParam.totalNumber">
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="table-box-title">
                        <span><img src="./../../../../static/image/affairs/asset/loan.png" />借还记录</span>
                        <div>
                            <el-button @click="editLoan('add')">添加</el-button>
                            <el-button @click="getAllLoan">导出</el-button>
                        </div>
                    </div>
                    <div class="zh-table-contents" v-loading="loanLoading.status" :element-loading-text="loanLoading.txt">
                        <el-table
                            :data="loanData"
                            border
                            fixed
                            max-height="600"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                :index="loanTypeIndex"
                                label="序号"
                                align="center"
                                show-overflow-tooltip
                                width="50">
                            </el-table-column>
                            <el-table-column
                                prop="day_time"
                                label="借用时间"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="num"
                                label="借用数"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="user_name"
                                label="借用人"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="状态"
                                align="center"
                                width="111"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
		      		      			<el-select 
										style="width:100%" 
										v-loading="scope.row.loading" 
										@change="changeStatus($event, scope.row, 'loan')"  
										v-model="scope.row.status" placeholder="请选择" 
										filterable>
									    <el-option label="借用中" :value="1"></el-option>
                                        <el-option label="已归还" :value="2"></el-option>
									</el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="备注"
                                align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="check-row" v-if="scope.row.comment" @click="checkRemark(scope.row)">查看</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="130">
                                <template slot-scope="scope">
                                    <el-button @click="editLoan('edit', scope.row)" type="text">编辑</el-button>
                                    <el-button @click="deleteRow(scope.row.id, 'loan')" type="text" class="delete-button">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="table-pagination" v-show="loanParam.totalNumber > 10">
                            <el-pagination
                                @size-change="loanSizeChange"
                                @current-change="loanCurrentChange"
                                :current-page="loanParam.pageIndex"
                                :page-sizes="[10, 20, 30, 40, 50, 100]"
                                :page-size="loanParam.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="loanParam.totalNumber">
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="table-box-title">
                        <span><img src="./../../../../static/image/affairs/asset/maintain.png" />维修记录</span>
                        <div>
                            <el-button @click="editMaintain('add')">添加</el-button>
                            <el-button @click="getAlManmi">导出</el-button>
                        </div>
                    </div>
                    <div class="zh-table-contents" v-loading="maintainLoading.status" :element-loading-text="maintainLoading.txt">
                        <el-table
                            :data="maintainData"
                            border
                            fixed
                            max-height="600"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                :index="maintainTypeIndex"
                                label="序号"
                                align="center"
                                show-overflow-tooltip
                                width="50">
                            </el-table-column>
                            <el-table-column
                                prop="day_time"
                                label="报损时间"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="num"
                                label="维修数"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="user_name"
                                label="维修人"
                                align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="状态"
                                align="center"
                                width="111"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
		      		      			<el-select 
										style="width:100%" 
										v-loading="scope.row.loading" 
										@change="changeStatus($event, scope.row, 'maintain')"  
										v-model="scope.row.status" placeholder="请选择" 
										filterable>
									    <el-option label="维修中" :value="1"></el-option>
                                        <el-option label="已修复" :value="2"></el-option>
                                        <el-option label="已报废" :value="3"></el-option>
									</el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop=""
                                label="备注"
                                align="center"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="check-row" v-if="scope.row.comment" @click="checkRemark(scope.row)">查看</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="130">
                                <template slot-scope="scope">
                                    <el-button @click="editMaintain('edit', scope.row)" type="text">编辑</el-button>
                                    <el-button @click="deleteRow(scope.row.id, 'maintain')" type="text" class="delete-button">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="table-pagination" v-show="maintainParam.totalNumber > 10">
                            <el-pagination
                                @size-change="maintainSizeChange"
                                @current-change="maintainCurrentChange"
                                :current-page="maintainParam.pageIndex"
                                :page-sizes="[10, 20, 30, 40, 50, 100]"
                                :page-size="maintainParam.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="maintainParam.totalNumber">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            title="图片预览"
            class="picture-preview"
            :visible.sync="imgVisible"
            :close-on-click-modal="false">
            <div>
                <img :src="imgViewUrl">
            </div>
        </el-dialog>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

        <el-dialog 
            class="receive-add" 
            :title="receiveTitle" 
            :visible.sync="receiveVisible" 
            :before-close="cancelForm"
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            width="500px">
			<el-form :model="receiveForm" :rules="rules" ref="receiveForm" label-width="100px" class="receive-form">
                <el-form-item label="领用时间：" prop="pickerDate">
                    <el-date-picker
                        v-model="receiveForm.pickerDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptionsStart"
                        style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="领用数：" prop="count">
                    <el-input-number 
                        class="input-number-text"
                        v-model="receiveForm.count" 
                        controls-position="right" 
                        :min="1" 
                        :precision="0"
                        placeholder="填写领用数，不能超过资产总数">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="领用人：" prop="people">
                    <el-input v-model="receiveForm.people" :maxLength="20" placeholder="请填写领用人"></el-input>
                </el-form-item>
                <el-form-item label="领用部门：" prop="branch">
                    <el-input v-model="receiveForm.branch" :maxLength="20" placeholder="请填写领用部门"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input
                        type="textarea"
                        placeholder="在此输入备注"
                        :rows="4"
                        v-model="receiveForm.remark"
                        maxlength="140"
                        show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="cancelForm">取消</el-button>
			    <el-button type="primary" @click="submitReceive('receiveForm')">确定</el-button>			    
			</div>
		</el-dialog>

        <el-dialog 
            class="loan-add" 
            :title="loanTitle" 
            :visible.sync="loanVisible" 
            :before-close="cancelForm"
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            width="500px">
			<el-form :model="loanForm" :rules="rules" ref="loanForm" label-width="100px" class="loan-form">
                <el-form-item label="借用时间：" prop="pickerDate">
                    <el-date-picker
                        v-model="loanForm.pickerDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptionsStart"
                        style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="借用数：" prop="count">
                    <el-input-number 
                        class="input-number-text"
                        v-model="loanForm.count" 
                        controls-position="right" 
                        :min="1" 
                        :precision="0"
                        placeholder="填写借用数，不能超过资产总数">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="借用人：" prop="people">
                    <el-input v-model="loanForm.people" :maxLength="20" placeholder="请填写借用人"></el-input>
                </el-form-item>
                <el-form-item label="借用部门：" prop="branch">
                    <el-input v-model="loanForm.branch" :maxLength="20" placeholder="请填写借用部门"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="state">
                    <el-select v-model="loanForm.state">
                        <el-option label="借用中" value="1"></el-option>
                        <el-option label="已归还" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：">
                     <el-input
                        type="textarea"
                        placeholder="在此输入备注"
                        :rows="4"
                        v-model="loanForm.remark"
                        maxlength="140"
                        show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="cancelForm">取消</el-button>
			    <el-button type="primary" @click="submitLoan('loanForm')">确定</el-button>			    
			</div>
		</el-dialog>

        <el-dialog 
            class="maintain-add" 
            :title="maintainTitle" 
            :visible.sync="maintainVisible" 
            :before-close="cancelForm"
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            width="500px">
			<el-form :model="maintainForm" :rules="rules" ref="maintainForm" label-width="100px" class="maintain-form">
                <el-form-item label="报损时间：" prop="pickerDate">
                    <el-date-picker
                        v-model="maintainForm.pickerDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptionsStart"
                        style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                 <el-form-item label="维修数：" prop="count">
                    <el-input-number 
                        class="input-number-text"
                        v-model="maintainForm.count" 
                        controls-position="right" 
                        :min="1" 
                        :precision="0"
                        placeholder="填写维修数，不能超过资产总数">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="维修人：" prop="people">
                    <el-input v-model="maintainForm.people" :maxLength="20" placeholder="请输入维修人"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="state">
                    <el-select v-model="maintainForm.state">
                        <el-option label="维修中" value="1"></el-option>
                        <el-option label="已修复" value="2"></el-option>
                        <el-option label="已报废" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input
                        type="textarea"
                        placeholder="在此输入备注"
                        :rows="4"
                        v-model="maintainForm.remark"
                        maxlength="140"
                        show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="cancelForm">取消</el-button>
			    <el-button type="primary" @click="submitMaintain('maintainForm')">确定</el-button>			    
			</div>
		</el-dialog>
    </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
import {str2Buffer} from './../../../tools/tool';
import assetDefault from './../../../../static/image/affairs/asset/asset-default.png.png'

export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            imgVisible: false, // 图片预览
            receiveVisible: false, // 领用弹出
            loanVisible: false, // 借出弹出
            maintainVisible: false, // 维修弹出
            receiveTitle: '添加领用记录', // 领用标题
            loanTitle: '添加领用记录', // 出标题
            maintainTitle: '添加领用记录', // 维修标题
            assetId: null,
            imgViewUrl: null, // 图片地址
            detailInfo: {}, // 资产信息
            defaultImg: assetDefault,
            receiveData:[], // 领用列表
            loanData: [], // 借还列表
            maintainData: [], // 维修列表
            receiveParam: { // 领用参数
                pageIndex: 1,
                pageSize: 10,
                totalNumber: 0
            },
            loanParam: { // 借还参数
                pageIndex: 1,
                pageSize: 10,
                totalNumber: 0
            },
            maintainParam: { // 维修参数
                pageIndex: 1,
                pageSize: 10,
                totalNumber: 0
            },
            loading: { // 数据加载状态
                status: false,
                txt: '获取数据...'
            },
            receiveLoading: {
                status: false,
                txt: '获取数据...'
            },
            loanLoading: {
                status: false,
                txt: '获取数据...'
            },
            maintainLoading: {
                status: false,
                txt: '获取数据...'
            },
            receiveForm: { // 添加记录表单
                pickerDate: '',
                count: null,
                people: null,
                branch: null,
                remark: ''
            },
            loanForm: { // 添加记录表单
                pickerDate: '',
                count: null,
                people: null,
                branch: null,
                state: '1',
                remark: ''
            },
            maintainForm: { // 添加记录表单
                pickerDate: '',
                count: null,
                people: null,
                state: '1',
                remark: ''
            },
            pickerOptionsStart: {
                disabledDate: (time) => {
                    return time.getTime() > Date.now();
                }
            },
            rules: {
                pickerDate: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                count: [
                    { required: true, message: '请输入领用数', trigger: 'blur' }
                ],
                people: [
                    { required: true, message: '请输入领用人', trigger: 'blur' }
                ],
                branch: [
                    { required: true, message: '请输入领用部门', trigger: 'blur' }
                ],
                state: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        this.assetId = this.$route.params.id;
        this.getDetail();
        this.receiveList();
        this.loanList();
        this.maintainList();
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 获取资产状态
         * @param {Number} key 资产状态
         */
        getAssetState(key) {
            if (this.detailInfo.spread) {
                let res = this.detailInfo.spread.filter(item => item.status == key)[0];
                return res ? res.number : 0;
            } else {
                return 0;
            }
        },
        /**
         * 获取资产详细信息
         */
        getDetail() {
            this.loading.status = true;

            let success = (res => {
                this.detailInfo = res.data;
                this.loading.status = false;
            })

            this.$ajax.get('api/property/single',{params: {id: this.assetId}, func:{success: success}})
        },
        /**
         * 查看图片
         * @param {Object} obj 记录信息
         */
        checkImg(obj) {
            let url = this.detailInfo.thumb ? (this.BASE_URL + this.detailInfo.thumb) : this.defaultImg

            this.imgViewUrl = url;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [url];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        /**
         * 获取领用数据
         */
        receiveList() {
            let success = (res => {
                this.receiveLoading.status = false;
                this.receiveData = res.data.data;
                this.receiveParam.totalNumber = res.data.data_sum;
            })

            let params = {
                page_index: this.receiveParam.pageIndex,
                page_size: this.receiveParam.pageSize,
                property_id: this.assetId
            }

            this.$ajax.get('api/property/uselists',{params: params, func: {success: success}})
        },
         /**
         * 获取借用数据
         */
        loanList() {
            let success = (res => {
                this.loanLoading.status = false;
                this.loanData = res.data.data;
                this.loanParam.totalNumber = res.data.data_sum;
            })

            let params = {
                page_index: this.loanParam.pageIndex,
                page_size: this.loanParam.pageSize,
                property_id: this.assetId
            }

            this.$ajax.get('api/property/borrowlists',{params: params, func: {success: success}})
        },
         /**
         * 获取维修数据
         */
        maintainList() {
            let success = (res => {
                this.maintainLoading.status = false;
                this.maintainData = res.data.data;
                this.maintainParam.totalNumber = res.data.data_sum;
            })

            let params = {
                page_index: this.maintainParam.pageIndex,
                page_size: this.maintainParam.pageSize,
                property_id: this.assetId
            }

            this.$ajax.get('api/property/fixlists',{params: params, func: {success: success}})
        },
        /**
         * 改变状态
         * @param {Number} val 改变的状态
         * @param {Object} obj 记录信息
         * @param {String} flag 借用(loan) | 维修(maintain)
         */
        changeStatus(val, obj, flag){
            if (flag === 'loan') {
                let params = {
                    id: obj.id,
                    property_id: this.assetId,
                    day_time: obj.day_time,
                    department: obj.department,
                    num: obj.num,
                    user_name: obj.user_name,
                    status: val,
                    comment: obj.comment
                }

                const success = (res => {
                    this.$message.success(res.msg);
                })

                this.$ajax.put("api/property/borrowsingle", params, {func: {success: success}});
            } else {
                let params = {
                    id: obj.id,
                    property_id: this.assetId,
                    day_time: obj.day_time,
                    num: obj.num,
                    user_name: obj.user_name,
                    status: val,
                    comment: obj.comment
                }

                const success = (res => {
                    this.$message.success(res.msg);
                })

                this.$ajax.put("api/property/fixsingle", params, {func: {success: success}});
            }
        },
        /**
         * 领用表格序号
         * @param {Number} index  序号
         */
        receiveTypeIndex(index) {
            return index + (this.receiveParam.pageIndex - 1) * this.receiveParam.pageSize + 1;
        },
        /**
         * 借还表格序号
         * @param {Number} index  序号
         */
        loanTypeIndex(index) {
            return index + (this.loanParam.pageIndex - 1) * this.loanParam.pageSize + 1;
        },
        /**
         * 维修表格序号
         * @param {Number} index  序号
         */
        maintainTypeIndex(index) {
            return index + (this.maintainParam.pageIndex - 1) * this.maintainParam.pageSize + 1;
        },
        /**
         * 查看领用备注
         * @param {Object} obj 记录信息
         */
        checkRemark(obj) {
            this.$alert(obj.comment, '备注', {
                confirmButtonText: '确定'
            });
        },
        /**
         * 编辑领用记录
         * @param {String} val 添加或编辑状态
         * @param {Object} obj 记录信息
         */
        editReceive(val, obj) {
            this.receiveVisible = true;
            
            if (val === 'edit') {
                this.receiveId = obj.id;
                this.receiveTitle = '编辑领用记录';
                this.receiveForm = {
                    pickerDate: obj.day_time,
                    count: obj.num,
                    people: obj.user_name,
                    branch: obj.department,
                    remark: obj.comment
                }

            } else {
                this.receiveId = '';
                this.receiveTitle = '添加领用记录';
                this.receiveForm = {
                    pickerDate: '',
                    count: null,
                    people: null,
                    branch: null,
                    remark: ''
                }
            }

            this.$nextTick(() => {
                this.$refs.receiveForm.clearValidate();
            })
        },
        /**
         * 编辑借用记录
         * @param {Object} obj 记录信息
         */
        editLoan(val, obj) {
            this.loanVisible = true;

            if (val === 'edit') {
                this.loadId = obj.id;
                this.loanTitle = '编辑借还记录';
                    this.loanForm = {
                        pickerDate: obj.day_time,
                        count: obj.num,
                        people: obj.user_name,
                        branch: obj.department,
                        state: obj.status + '',
                        remark: obj.comment
                    }
            } else {
                this.loadId = '';
                this.loanTitle = '添加借还记录';
                this.loanForm = {
                    pickerDate: '',
                    count: null,
                    people: null,
                    branch: null,
                    state: '1',
                    remark: ''
                }
            }

            this.$nextTick(() => {
                this.$refs.loanForm.clearValidate();
            })
        },
         /**
         * 编辑维修记录
         * @param {Object} obj 记录信息
         */
        editMaintain(val, obj) {
            this.maintainVisible = true;

            if (val === 'edit') {
                this.maintainId = obj.id;
                this.maintainTitle = '编辑维修记录';
                this.maintainForm = {
                    pickerDate: obj.day_time,
                    count: obj.num,
                    people: obj.user_name,
                    branch: obj.department,
                    state: obj.status + '',
                    remark: obj.comment
                }
            } else {
                this.maintainId = '';
                this.maintainTitle = '添加维修记录';
                this.maintainForm = {
                    pickerDate: '',
                    count: null,
                    people: null,
                    state: '1',
                    remark: ''
                }
            }

            this.$nextTick(() => {
                this.$refs.maintainForm.clearValidate();
            })
        },
        /**
         * 取消弹出
         */
        cancelForm() {
            this.loanVisible = false;
            this.receiveVisible = false;
            this.maintainVisible = false;
        },
        /**
         * 保存领用记录
         */
        submitReceive(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        id: this.receiveId ? this.receiveId : null,
                        property_id: this.assetId,
                        day_time: this.receiveForm.pickerDate,
                        num: this.receiveForm.count,
                        user_name: this.receiveForm.people,
                        department: this.receiveForm.branch,
                        comment: this.receiveForm.remark
                    }

                    const success = (res => {
                        this.receiveVisible = false;
                        this.$message.success(res.msg);

                        this.receiveList();
                    })

                    if (this.receiveId) {
                        this.$ajax.put("api/property/usesingle", params, {func: {success: success}});
                    } else {
                        this.$ajax.post("api/property/usesingle", params, {func: {success: success}});
                    }
                    
                } else {
                    return false;
                }
            });
        },
        /**
         * 保存借用记录
         */
        submitLoan(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        id: this.loadId ? this.loadId : null,
                        property_id: this.assetId,
                        day_time: this.loanForm.pickerDate,
                        department: this.loanForm.branch,
                        num: this.loanForm.count,
                        user_name: this.loanForm.people,
                        status: this.loanForm.state,
                        comment: this.loanForm.remark
                    }

                    const success = (res => {
                        this.loanVisible = false;
                        this.$message.success(res.msg);

                        this.loanList();
                    })

                    if (this.loadId) {
                        this.$ajax.put("api/property/borrowsingle", params, {func: {success: success}});
                    } else {
                        this.$ajax.post("api/property/borrowsingle", params, {func: {success: success}});
                    }
                } else {
                    return false;
                }
            });
        },
        /**
         * 保存维修记录
         */
        submitMaintain(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        id: this.maintainId ? this.maintainId : null,
                        property_id: this.assetId,
                        day_time: this.maintainForm.pickerDate,
                        num: this.maintainForm.count,
                        user_name: this.maintainForm.people,
                        status: this.maintainForm.state,
                        comment: this.maintainForm.remark
                    }

                    const success = (res => {
                        this.maintainVisible = false;
                        this.$message.success(res.msg);

                        this.maintainList();
                    })

                    if (this.maintainId) {
                        this.$ajax.put("api/property/fixsingle", params, {func: {success: success}});
                    } else {
                        this.$ajax.post("api/property/fixsingle", params, {func: {success: success}});
                    }

                } else {
                    return false;
                }
            });
        },
        /**
         * 确认删除记录
         * @param {Number} id 记录 id
         * @param {String} val 标识
         */
        deleteRow(id, val) {
            let yes = (res => {
                if (val === 'receive') {
                    this.deleteReceive(id);
                } else if (val === 'loan') {
                    this.deleteLoan(id);
                } else {
                    this.deleteMaintain(id);
                }
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '确定要删除该条记录吗？'});
        },
        /**
         * 删除领用数据
         * @param {String} id 删除的 id
         */
        deleteReceive(id) {
            this.receiveLoading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.receiveData.length - 1 === 0) {
                    if (this.receiveParam.pageIndex > 1) {
                        this.receiveParam.pageIndex-- ;
                    } else {
                        this.receiveParam.pageIndex = 1;
                    }
                }

                this.receiveList();
            });
            let fail = (res => {
                this.$message.error(res.msg);
                this.receiveLoading.status = false;
            })
            let params = {
                id,
                property_id: this.assetId
            }
                
            this.$ajax.delete('api/property/usesingle', {params, func: {success: success, fail: fail}})
        },
        /**
         * 删除数据
         * @param {String} id 删除的 id
         */
        deleteLoan(id) {
            this.loanLoading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.loanData.length - 1 === 0) {
                    if (this.loanParam.pageIndex > 1) {
                        this.loanParam.pageIndex-- ;
                    } else {
                        this.loanParam.pageIndex = 1;
                    }
                }

                this.loanList();
            });
            let fail = (res => {
                this.$message.error(res.msg);
                this.loanLoading.status = false;
            })
            let params = {
                id,
                property_id: this.assetId
            }
                
            this.$ajax.delete('api/property/borrowsingle', {params, func: {success: success, fail: fail}})
        },
        /**
         * 删除数据
         * @param {String} id 删除的 id
         */
        deleteMaintain(id) {
            this.maintainLoading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.maintainData.length - 1 === 0) {
                    if (this.maintainParam.pageIndex > 1) {
                        this.maintainParam.pageIndex-- ;
                    } else {
                        this.maintainParam.pageIndex = 1;
                    }
                }

                this.maintainList();
            });
            let fail = (res => {
                this.$message.error(res.msg);
                this.maintainLoading.status = false;
            }) 
            let params = {
                id,
                property_id: this.assetId
            }
                
            this.$ajax.delete('api/property/fixsingle', {params, func: {success: success, fail: fail}})
        },
        /**
         * 领用表格每页数量改变
         * @param {Number} val 每页数据条数
         */
        receiveSizeChange(val) {
            this.receiveParam.pageIndex = 1;
            this.receiveParam.pageSize = val;

            this.receiveList();
        },
        /**
         * 领用表格页数改变
         * @param {Number} val 页数
         */
        receiveCurrentChange(val) {
            this.receiveParam.pageIndex = val;

            this.receiveList();
        },
        /**
         * 领用表格每页数量改变
         * @param {Number} val 每页数据条数
         */
        loanSizeChange(val) {
            this.loanParam.pageIndex = 1;
            this.loanParam.pageSize = val;

            this.receiveList();
        },
        /**
         * 领用表格页数改变
         * @param {Number} val 页数
         */
        loanCurrentChange(val) {
            this.loanParam.pageIndex = val;

            this.receiveList();
        },
        /**
         * 领用表格每页数量改变
         * @param {Number} val 每页数据条数
         */
        maintainSizeChange(val) {
            this.maintainParam.pageIndex = 1;
            this.maintainParam.pageSize = val;

            this.receiveList();
        },
        /**
         * 领用表格页数改变
         * @param {Number} val 页数
         */
        maintainCurrentChange(val) {
            this.maintainParam.pageIndex = val;

            this.receiveList();
        },
        /**
         * 导出领用表格
         */
        getAllReceive() {
            if(this.receiveData.length === 0){
                this.$message.warning("导出的数据为空！")
                return false;
            }
            let params = {
                property_id: this.$route.params.id
            }
            
            this.export_excel('api/property/useexcel', params, '领用记录');
        },
        /**
         * 导出借用表格
         */
        getAllLoan() {
            if(this.loanData.length === 0){
                this.$message.warning("导出的数据为空！")
                return false;
            }
            let params = {
                property_id: this.$route.params.id
            }
            
            this.export_excel('api/property/borrowexcel', params, '借用记录');
        },
        /**
         * 导出维修表格
         */
        getAlManmi() {
            if(this.maintainData.length === 0){
                this.$message.warning("导出的数据为空！")
                return false;
            }
            let params = {
                property_id: this.$route.params.id
            }

            this.export_excel('api/property/fixexcel', params, '维修记录');
        },
        /**
         * 获取状态
         */
        getState(val) {
            if (val == 1) {
                return '维修中';
            } else if (val == 2) {
                return '已修复';
            } else {
                return '已报废';
            }
        },
        /**
         * 跳到编辑页面
         */
        goTo() {
            this.$router.push('/affairs/asset/asset-edit/' + this.$route.params.id);
        },
        /**
         * 下载资产二维码
         */
        exportQrCode() {
            let name = this.detailInfo.identifier + '+' + this.detailInfo.name;
            let params = {id: this.$route.params.id};

            this.export_excel('api/property/qrcode', params, name, 'qr');
        }
    },
}
</script>

<style lang="scss">
    .asset-detail {
        .asset-detail-content {
            .content-top-box {
                padding: 20px 40px 30px;
                border: 1px solid #EFEFEF;
                border-radius: 4px;

                .top-box-title {
                    display: flex;
                    justify-content: space-between;
                    height: 36px;
                    border-bottom: 1px solid #EFEFEF;
                    box-sizing: border-box;

                    >span:first-child {
                        font-size: 14px;
                        color: #666666;
                    }

                    >span:last-child {
                        font-size: 14px;
                        color: #498CDA;
                        cursor: pointer;
                    }
                }

                .top-box-content {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 20px;

                    >div:first-child {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 330px;
                        max-height: 350px;

                        img {
                            width: 100%;
                            height: 100%;
                            max-width: 100%;
                            max-height: 100%;
                            object-fit: contain;
                        }

                        .asset-img-btn {
                            display: none;
                            transition: all 1s;
                        }

                        &:hover .asset-img-btn {
                            position: absolute;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 100%;
                            font-size: 30px;
                            color: #fff;
                            background: rgba(0, 0, 0, 0.5);
                            cursor: pointer;
                            transition: all 1s;
                        }
                    }

                    >div:last-child {
                        flex: 1;
                        position: relative;
                        margin-left: 20px;
                        background: #F4FBFF;
                        border: 1px solid #F1F6FE;

                        .top-box-edit {
                            position: absolute;
                            top: 0;
                            right: 0;
                            padding: 3px 20px;
                            font-size: 14px;
                            color: #FFFFFF;
                            background: #348EFC;
                            border-radius: 4px;
                            cursor: pointer;
                        }

                        .top-box-right {
                            padding: 23px 20px 0;
                            border-bottom: 1px dashed #DBDFE5;

                            >div {
                                .list-item {
                                    display: flex;
                                    margin-bottom: 12px;

                                    >div {
                                        display: flex;
                                        width: 50%;

                                        >span:last-child {
                                            flex: 1;
                                        }
                                    }
                                }
                            }

                            .content-state {
                                display: inline-block;
                                flex: 1;
                                width: inherit;
                                color: #DDD;

                                span {
                                    font-size: 12px;
                                    color: #000;
                                    text-align: center;
                                }

                                span:first-child {
                                    margin-right: 20px;
                                    background: #D4FFD1;
                                }

                                span:nth-child(2) {
                                    margin: 0 20px;
                                    background: #E5F8FF;
                                }

                                span:nth-child(3) {
                                    margin: 0 20px;
                                    background: #EBE8F7;
                                }

                                span:nth-child(4) {
                                    margin: 0 20px;
                                    background: #ECEEF3;
                                }

                                .last-span {
                                    flex: initial !important;
                                    margin-left: 20px;
                                    background: #FFF0F0;
                                }
                            }
                        }

                        .name-title {
                            width: 140px;
                            color: #666;
                        }

                        .top-box-bottom {
                            padding: 16px 20px;

                            >div {
                                display: inline-block;

                                &:last-child {
                                    margin-left: 80px;
                                }
                            }
                        }
                    }
                }
            }

            .content-bottom-box {
                display: flex;
                justify-content: space-between;
                margin: 20px 0;

                >div {
                    flex: 1;
                    width: 0;
                }

                >div:nth-child(2) {
                    margin: 0 20px;
                }

                .table-box-title {
                    display: flex;
                    justify-content: space-between;
                    padding: 0 30px 0 20px;
                    height: 36px;
                    line-height: 36px;
                    font-size: 14px;
                    color: #FFFFFF;
                    background: #498CDA;
                    border-radius: 4px 4px 0px 0px;

                    img {
                        margin-right: 12px;
                        vertical-align: middle;
                    }

                    button {
                        padding: 7px 21px;
                        color: #409EFF;
                        border-color: #c6e2ff;
                        background-color: #ecf5ff;
                    }
                }

                .el-table__empty-block {
                    min-height: 42px;
                    max-height: 49px;
                }

                .check-row {
                    color: #348EFC;
                    cursor: pointer;
                }
            }
        }

        .input-number-text {
            width: 100%;

            >span {
                display: none;
            }

            input {
                text-align: left;
            }
        }
    }
</style>
